<template>
	<view class="detectCC">
		<view :class="['read_btns','nodiag']">
			<view class="cacel_btn" @click="cancleConnect">
				断开连接
			</view>
			<view class="scan_left">
				<view type="default" class="grades">{{GRADE}}
					<span>分</span>
				</view>
				<view class="scan-text" v-if="!isProcess">
					<h4 class="scaning">
						<button class="read_btn" v-if="!isProcess&&isDiagnosis" @click="isRead">一键诊断</button>
						<button class="read_btn" v-if="isCanvasShow" @click="drawImage">导出报告</button>
						<button v-if="isProcess" class="read_btn">诊断中...</button>
					</h4>
					<text>获取设备监控、网络、软件等状态信息哦~</text>
				</view>
				<view class="scan-text" v-else>
					<h4 class="scaning">智能扫描中</h4>
					<text>正在诊断监控项~</text>
				</view>
			</view>


			<view class="progress-box" v-if="isProcess">
				<progress :percent="percent" :border-radius="20" show-info active="true" active-mode="forwards"
					:stroke-width="8" backgroundColor="#ffffff" activeColor="#58a1e8" />
			</view>
		</view>
		<view class="diognosis-btns">
			<u-button v-if="!isDiagnosis" class="dg-btn" @click="isRead">一键诊断</u-button>
		</view>
		<view v-if="isDiagnosis">
			<view class="cards param-content" id="poster">
				<u-collapse :accordion="false">
					<u-collapse-item title="系统开关量" :open="true" class="collapse-one" :disabled="statusResult">
						<view v-if="statusResult" :style="{color: comColor(0)}">
							读取失败
						</view>
						<u-cell-group :border="false" v-else>
							<u-cell-item title="摄像头是否在线:" :arrow="false"
								:value="CAMERA_ONLINE[masterControl.param1] || masterControl.param1"
								:value-style="{color: comColor2(masterControl.param1)}">
							</u-cell-item>
							<u-cell-item title="4G是否在线 :" :arrow="false"
								:value="CAMERA_ONLINE[masterControl.param2] || masterControl.param2"
								:value-style="{color: comColor2(masterControl.param2)}">
							</u-cell-item>
						</u-cell-group>
					</u-collapse-item>
					<u-collapse-item title="信号质量" :open="true" class="collapse-one" v-if="isShow>0">
						<u-cell-item title="信号值质量:" :arrow="false" :value="masterControl.param4">
						</u-cell-item>
					</u-collapse-item>

					<u-collapse-item title="硬件" :open="true" class="collapse-one" v-if="isShow>1">
						<u-cell-item title="仓控板得分率:" :arrow="false" :value="`${masterControl.param5}%`">
						</u-cell-item>
						<u-cell-item title="充电电源（输出继电器）得分率:" :arrow="false" :value="`${masterControl.param6}%`">
						</u-cell-item>
						<u-cell-item title="电子锁状态得分率:" :arrow="false" :value="`${masterControl.param7}%`">
						</u-cell-item>
						<u-cell-item title="格口温度得分率:" :arrow="false" :value="`${masterControl.param8}%`">
						</u-cell-item>
						<u-cell-item title="电表状态:" :arrow="false"
							:value="COMMUNITE_ONLINE[masterControl.param3] || masterControl.param3"
							:value-style="{color: comColor2(masterControl.param3)}">
						</u-cell-item>
					</u-collapse-item>
					<u-collapse-item title="综合" :open="true" class="collapse-one" v-if="isShow>2">
						<u-cell-item title="柜体温度得分率:" :arrow="false" :value="`${masterControl.param9}%`">
						</u-cell-item>
						<u-cell-item title="本地仓启用率:" :arrow="false" :value="`${masterControl.param10}%`">
						</u-cell-item>
						<u-cell-item title="设备利用率:" :arrow="false" :value="`${masterControl.param11}%`">
						</u-cell-item>
					</u-collapse-item>
					<u-collapse-item title="软件" :open="true" class="collapse-one" v-if="isShow>3">
						<u-cell-item title="主控版本:" :arrow="false" value="是最新版本" :value-style="{color: comColor(1)}">
						</u-cell-item>
						<u-cell-item title="柜控版本:" :arrow="false" value="是最新版本" :value-style="{color: comColor(1)}">
						</u-cell-item>
						<u-cell-item title="充电电源(充电板)版本:" :arrow="false" value="是最新版本"
							:value-style="{color: comColor(1)}">
						</u-cell-item>
					</u-collapse-item>
				</u-collapse>
			</view>
		</view>

		<canvas
			:style="{ width: canvasW + 'px', height: canvasH + 'px' ,position: 'fixed',left:'-9999px', top: '-9999px'}"
			canvas-id="myCanvas" id="myCanvas">
		</canvas>
	</view>
</template>

<script>
	import {
		mapState,
	} from 'vuex';
	import {
		getLockOption,
		batteryIsOn,

		NETWORK,
		PLATFORM_CONNECT,
		IS_ENABLE,
		IS_ONLINE,
		POWER_CHANGE,
		IS_WARN,
		IS_ENABLED,
		HEAT1,
		ABNORMAL_OUTAGE,
		FLOODLIGHT,
		MAINTAIN_DOOR,
		WATER_FEEDBACK,
		SMOKE_STATUS,
		IS_START,
		IS_FAULT,
		IS_NORMAL,
		OVETRCURRENT,
		IS_DORMANT,
		CURRENT_LIMIT,
		IS_AUTO,
		IS_FORBIDDEN,
		BATERRY_TYPE,
		RUN_STATUS,
		UNDERVOL,
		UPVOL,
		HIGHTEM,
		PRESSURE,
		MOS_STATUS,
		BMS_STATUS,
		IS_DOORS,
		IS_CHARGE,
		CHARGE_CURRENT,
		OVER_CURRENT,
		VOL_LOSE,
		NOTALLOW_CHARGE,
		BATTERY_ONLINE,
		LOAD_PROTECT,
		UP_VOL_PROTECT,
		CURRENT_LIMIT_WARN,
		CELL_HIGH_TEM,
		ENVIR_LOW_TEM,
		ENVIR_HIGH_TEM,
		MOS_HIGH_TEM,
		LOW_VOL_PROTECT,
		INVERSE_PROTECT,
		BMS_SIGN,
		MOS_PIPE_STATUS,
		BATTERY_ADJUST,
		BATTERY_STATUSING,
		BATTERY_CONTROL,
		DOOR_STATUS,
		BATTERY_ISON,
		CAMERA_ONLINE,
		COMMUNITE_ONLINE,
	} from "@/common/config.js";

	import detectCCjs from "../js/detectCC.js";
	import saveImgJs from "../js/saveImg.js";
	import {
		goBack,
		getDataTimes
	} from "@/utils/index.js";
	export default {
		props: {
			deviceInfo: {
				type: Object,
				default: {},
			},
			deviceType: {
				type: String,
				default: "",
			},
		},
		mixins: [detectCCjs, saveImgJs],

		data() {
			return {
				isShow: 0,
				statusResult: '',

				show: false,

				NETWORK: NETWORK,
				PLATFORM_CONNECT: PLATFORM_CONNECT,
				IS_ENABLE: IS_ENABLE,
				IS_ONLINE: IS_ONLINE,
				POWER_CHANGE: POWER_CHANGE,
				IS_WARN: IS_WARN,
				IS_ENABLED: IS_ENABLED,
				HEAT1: HEAT1,
				ABNORMAL_OUTAGE: ABNORMAL_OUTAGE,
				FLOODLIGHT: FLOODLIGHT,
				MAINTAIN_DOOR: MAINTAIN_DOOR,
				WATER_FEEDBACK: WATER_FEEDBACK,
				SMOKE_STATUS: SMOKE_STATUS,
				IS_START: IS_START,
				IS_FAULT: IS_FAULT,
				IS_NORMAL: IS_NORMAL,
				OVETRCURRENT: OVETRCURRENT,
				IS_DORMANT: IS_DORMANT,
				CURRENT_LIMIT: CURRENT_LIMIT,
				IS_AUTO: IS_AUTO,
				IS_FORBIDDEN: IS_FORBIDDEN,
				BATERRY_TYPE: BATERRY_TYPE,
				RUN_STATUS: RUN_STATUS,
				UNDERVOL: UNDERVOL,
				UPVOL: UPVOL,
				HIGHTEM: HIGHTEM,
				PRESSURE: PRESSURE,
				MOS_STATUS: MOS_STATUS,
				BMS_STATUS: BMS_STATUS,
				IS_DOORS: IS_DOORS,
				IS_CHARGE: IS_CHARGE,
				CHARGE_CURRENT: CHARGE_CURRENT,
				OVER_CURRENT: OVER_CURRENT,
				VOL_LOSE: VOL_LOSE,
				NOTALLOW_CHARGE: NOTALLOW_CHARGE,
				BATTERY_ONLINE: BATTERY_ONLINE,
				LOAD_PROTECT: LOAD_PROTECT,
				UP_VOL_PROTECT: UP_VOL_PROTECT,
				CURRENT_LIMIT_WARN: CURRENT_LIMIT_WARN,
				CELL_HIGH_TEM: CELL_HIGH_TEM,
				ENVIR_LOW_TEM: ENVIR_LOW_TEM,
				ENVIR_HIGH_TEM: ENVIR_HIGH_TEM,
				MOS_HIGH_TEM: MOS_HIGH_TEM,
				LOW_VOL_PROTECT: LOW_VOL_PROTECT,
				INVERSE_PROTECT: INVERSE_PROTECT,
				BMS_SIGN: BMS_SIGN,
				MOS_PIPE_STATUS: MOS_PIPE_STATUS,
				BATTERY_ADJUST: BATTERY_ADJUST,
				BATTERY_STATUSING: BATTERY_STATUSING,
				BATTERY_CONTROL: BATTERY_CONTROL,
				DOOR_STATUS: DOOR_STATUS,
				BATTERY_ISON: BATTERY_ISON,
				CAMERA_ONLINE: CAMERA_ONLINE,
				COMMUNITE_ONLINE: COMMUNITE_ONLINE,

				percent: 10, //百分比0~100

				isDiagnosis: false, //诊断状态
				currentIndex: null, //当前仓号

				command: 8, //命令字
				currentCollapse: 0, //当前折叠面板
				isProcess: false, //是否诊断中
				dgMessage: "", //检测状态提示信息

				masterControl: { //主控状态
					param1: '',
					param2: '',
					param3: '',
					param4: '',
					param5: '',
					param6: '',
					param7: '',
					param8: '',
					param9: '',
					param10: '',
					param11: '',
				},
				GRADE: 100, //分值

				canvasW: 0, // 画布宽
				canvasH: 0, // 画布高
				SystemInfo: {}, // 设备信息
				isCanvasShow: false,
			}
		},

		async mounted(option) {
			// 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
			this.SystemInfo = await this.getSystemInfo();
			this.canvasW = this.SystemInfo.windowWidth; // 画布宽度
			this.canvasH = 700;
		},
		methods: {
			// 断开连接
			async cancleConnect() {
				let res = await this.$store.dispatch('closeBLEConnection', this.deviceInfo.deviceId);
				// 断开成功,返回上一页
				if (res) {
					this.$Toast.none('连接已断开~');
					setTimeout(() => {
						goBack();
					}, 2000)
				}
			},
			comColor(item) {
				if (item == 0) {
					return '#f56c6c';
				} else if (item == 1) {
					return '#19be6b'
				}
				return "";
			},
			comColor2(item) {
				if (item == 1) {
					return '#f56c6c';
				} else if (item == 0) {
					return '#19be6b'
				}
				return "";
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import "../index.scss";
</style>